<template>
    <div>
        <el-menu class="el-menu-demo" mode="horizontal" background-color="#334157" text-color="#fff"
            active-text-color="#fff">
            <el-submenu index="2" class="submenu">
                <template slot="title">超级管理员</template>
                <el-menu-item @click="handleOut()" index="2-3">退出登陆</el-menu-item>
            </el-submenu>
            <el-menu-item index="1" class="submenu" @click="goGoods">个人中心</el-menu-item>
            <el-menu-item index="1" class="submenu" @click="goIndex">首页</el-menu-item>
        </el-menu>
        <div class="content">
            <img :src="data.img" alt="" class="image">
            <div class="rightContent">
                <p>
                    {{ data.title }}
                </p>
            </div>
        </div>
        <div>
            <comment :commentList="commentData" @doSend="doSend" @doChidSend="doChidSend"></comment>
        </div>
    </div>
</template>

<script>
import comment from 'bright-comment'
export default {
    components: {
        comment
    },
    data() {
        return {
            fullscreenLoading: false,
            data: {},
            commentData: [
                {
                    "id": 1,
                    "commentUser": {
                        "id": 111,
                        "nickName": "用户1",
                        "avatar": ""
                    },
                    "content": "萨拉啊小伙计！",
                    "createDate": '2024-04-26',
                    "childrenList": []
                },
                {
                    "id": 2,
                    "commentUser": {
                        "id": 111,
                        "nickName": "用户2",
                        "avatar": ""
                    },
                    "content": "萨拉啊小伙计！",
                    "createDate": '2024-04-26',
                    "childrenList": []
                }
            ]
        }
    },
    created() {
        console.log(this.$route.query.row)
        this.data = this.$route.query.row
    },
    methods: {
        // 退出登陆
        handleOut() {
            this.fullscreenLoading = true;
            setTimeout(() => {
                this.fullscreenLoading = false;
                this.$store.commit('logout', 'false')
                this.$router.push({ path: '/login' })
                this.$message({
                    type: 'success',
                    message: '已退出登录!'
                })
            }, 2000);
        },
        // 去首页
        goIndex() {
            this.$router.push({
                path: '/shopping',
                query: {
                    // url的参数, 类似get请求的传参

                },
            })
        },
        // 去后台
        goGoods() {
            this.$router.push({
                path: '/goods/Goods',
                query: {},
            })
        },
        // 初始文本框发送事件
        doSend(content) {
            console.log(content, 'content')
        },
        // 评论列表中文本框发送事件
        doChidSend(content, bid, pid) {
            console.log(content, bid, pid, 'content,bid,pid')
        }
    }
}
</script>

<style scoped>
.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.button {
    margin: 10px;
    float: right;
}

.breadcrumb {
    margin: 10px;
}

.content {
    margin: 20px;
    display: flex
}

.rightContent {
    margin: 0 20px;
}

.image {
    width: 400px;
    height: 400px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.button {
    margin: 10px;
    float: right;
}

.breadcrumb {
    margin: 10px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    border: none;
}

.submenu {
    float: right;
}

.buttonimg {
    height: 60px;
    background-color: transparent;
    border: none;
}

.showimg {
    width: 26px;
    height: 26px;
    position: absolute;
    top: 17px;
    left: 17px;
}

.showimg:active {
    border: none;
}
</style>